<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>

<body>
    <div id="pagiRoot"></div>
    <div id="tableRoot"></div>

    <script src="../../../tools/mathtool.js"></script>
    <script src="../../../tools/data_structure.js"></script>
    <script src="../../../tools/styletool.js"></script>

    <script>
        class MyTable {

            constructor(root, arr, options = {}) {
                this.root = root;
                this.arr = arr;
                this.pageArr = null;

                this.options = {
                    useDefaultLayout: options.useDefaultLayout != undefined ? options.useDefaultLayout : true,
                    pageNum: options.pageNum || 20
                }

                // 渲染DOM结构
                if (this.options.useDefaultLayout) {
                    this.renderDOM();
                }

                // 找出所有元素
                this.findElements()

                // 默认翻到第一页
                this.turnToPage(1)
            }

            /* 找出所有元素 */
            findElements() {
                this.tbody = this.root.querySelector("tbody");
            }

            /* 渲染样式 */
            renderStyle() {
                const cssStr = `
* {
margin: 0;
padding: 0;
}

.container {
width: 800px;
height: 40px;
border: 1px solid #333;
margin: 30px auto;
}

table {
width: 800px;
margin: 0 auto;
text-align: center;
}

tbody>tr:nth-child(odd) {
background-color: pink;
}

tbody>tr:nth-child(even) {
background-color: skyblue;
}

tbody>tr:hover {
background-color: #ccc;
}
`;
                applyCss(this.root, cssStr)
            }

            /* 渲染表格的DOM结构 */
            renderDOM() {
                let ths = "";

                // 如果配置中的thead项不存在（假-undefined）
                if (!this.options.thead) {
                    /* 根据数据项的属性动态渲染th */
                    // 拿出第一条数据
                    const item = this.arr[0];

                    // 遍历其属性
                    for (let attr in item) {
                        // 每个属性名造一个th并填充属性名
                        ths += `<th>${attr}</th>`;
                    }
                    console.log(ths);
                } else {
                    this.options.thead.forEach((name) => (ths += `<th>${name}</th>`));
                }

                this.root.innerHTML = `
    <table border="1" cellspacing="0">
        <thead>
        <tr>${ths}</tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td><td>tom</td><td>20</td><td>male</td><td>删除</td>
            </tr> -->
        </tbody>
    </table>
    `;
            }

            /* 渲染数据 */
            renderData() {

                // 清空tbody
                this.tbody.innerHTML = ""

                /* 遍历学生数组 */
                this.pageArr.forEach(
                    /* 为每个学生造一个tr 丢入tbody */
                    (item, index) => {
                        /* 为每个学生造一个tr 丢入tbody */
                        const tr = document.createElement("tr");
                        this.tbody.appendChild(tr);

                        /* 每个学生有几个属性 就造几个td 丢入tr */
                        for (let attr in item) {
                            const td = document.createElement("td");
                            tr.appendChild(td);

                            // td中的文字为当前属性值
                            td.innerText = item[attr];
                        }
                    }
                );

                // 应用样式

            }

            /* 翻页功能 */
            turnToPage(n) {

                // 从整体数据中截取一部分 n=5 [41,50]
                this.pageArr = this.arr.slice((n - 1) * 10, n * 10)

                // 渲染数据：渲染pageArr
                this.renderData();

                // 应用样式：DOM元素是动态造出来的 得动态添加样式
                this.options.useDefaultLayout && this.renderStyle();
            }
        }
    </script>

    <script>
        /* 造1234条学生数据 */
        const students = createStudents(1234)
        console.log(students);

        const mt = new MyTable(
            tableRoot,
            students,
            {
                thead: ["ID", "姓名", "年龄", "性别", "班级", "薪水"],

                // 使用使用默认布局（布局+样式）
                useDefaultLayout: true,

                // 每页显示的数据条数
                pageNum: 10
            }
        )

        // mt.turnToPage(5)
    </script>

</body>

</html>